<template>
	<div class="full-screen">
		<el-container style="height: 100%; border: 1px solid #eee">
		  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
			<el-menu
			      default-active="2" >
			      <el-menu-item 
					v-for="(item, index) in menuItems"
					:key="index"
					:index="index"  @click='addTab(item)'>
			        <i class="el-icon-menu"></i>
			        <span slot="title">{{item.name}}</span>
			      </el-menu-item>
			</el-menu>
		  </el-aside>
		  <el-container>
			<el-tabs v-model="editableTabsValue"  type="card"  closable  @tab-remove="removeTab" @tab-click='tabClick'>
				<el-tab-pane
				    v-for="(item) in editableTabs"
				    :key="item.name"
				    :label="item.title"
				    :name="item.name"
					:path="item.url"
				  >
				  <router-view></router-view>
				  </el-tab-pane>
			</el-tabs>
		  </el-container>
		</el-container>
	</div>
</template>

<script>
export default {
	data() {
	  return {
		  menuItems:[{
			  name:'数据源管理',
			  url:'/datasoureMgr'
		  },{
			  name:'数据源管理2',
			  url:'/datasoureMgr2'
		  }],
		   editableTabsValue: '2',
		   editableTabs:[],
		   tabIndex: 2
	  }
	},
	methods:{
		addTab(_menuItem){
			for(var i=0;i < this.editableTabs.length;i++){
				const _item = this.editableTabs[i];
				if(_item.name == _menuItem.name){
					this.showTab(_menuItem)
					return ;
				}
			}
			this.editableTabs.push({
			  title: _menuItem.name,
			  name: _menuItem.name,
			  path:_menuItem.url
			});
			this.showTab(_menuItem)
		},
		showTab(_menuItem){
			this.editableTabsValue = _menuItem.name;
			const _path = _menuItem.url;
			this.$router.push(`${_path}`)
		},
		removeTab(targetName) {
			let tabs = this.editableTabs;
			let activeName = this.editableTabsValue;
			if (activeName === targetName) {
			  tabs.forEach((tab, index) => {
				if (tab.name === targetName) {
				  let nextTab = tabs[index + 1] || tabs[index - 1];
				  if (nextTab) {
					activeName = nextTab.name;
				  }
				}
			  });
			}
			
			this.editableTabsValue = activeName;
			this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
	   tabClick(tab){
		 const _path = this.menuItems[tab.index].url;
		 this.$router.push(`${_path}`)
	  　}
	}
};
</script>

<style>
	.full-screen {
	  height: 100vh; /* 视口高度 */
	  width: 100vw; /* 视口宽度 */
	}
</style>